<template>
  <div class="procurement_box">
    <btnGroup title="业务总概" @change="selectChange" />
    <div v-if="purchaseView && logisticsView" class="procurement_data-item">
      <el-row>
        <el-col :span="5">
          <p class="row-title-lable">采购单数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="purchaseView.orderCount" :duration="2800" class="card-panel-num" />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">采购总金额</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="purchaseView.orderSales" :duration="2800" class="card-panel-num orange" :decimals="2" />
            <span class="data_unit">元</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">运输单金额</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="logisticsView.statisticsDriver.logisticsMoney" :duration="2800" :decimals="2" class="card-panel-num orange" />
            <span class="data_unit">元</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">自营车辆</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="logisticsView.hardwareData.carNumber" :duration="2800" class="card-panel-num" />
            <span class="data_unit">辆</span>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import btnGroup from '@/components/TopBtnGroup'
import CountTo from 'vue-count-to'
import { logisticsData, purchaseViewData } from '@/api/data'
import formatDate from '@/utils/formatDate'
export default {
  name: 'Overview',
  components: { btnGroup, CountTo },
  data() {
    return {
      logisticsView: null, // 物流概况
      purchaseView: null // 采购概况
    }
  },
  created() {
    this.$nextTick(() => {
      this.init(-1)
    })
  },
  methods: {
    formatData(type) {
      if (type === -1) { // 全部
        var myDate = new Date()
        return { start: '1970-1-1', end: myDate.format('yyyy-MM-dd hh:mm:ss') }
      } else if (type === 0) {
        const start = (formatDate.nowYear) + '-' + (formatDate.nowMonth + 1) + '-' + formatDate.nowDay + ' ' + '00:00:00'
        const end = (formatDate.nowYear) + '-' + (formatDate.nowMonth + 1) + '-' + formatDate.nowDay + ' ' + '23:59:59'
        return { start: start, end: end }
      } else if (type === 1) { // 本周
        const start = formatDate.getWeekStartDate() + ' ' + '00:00:00'
        const end = formatDate.getWeekEndDate() + ' ' + '23:59:59'
        return { start: start, end: end }
      } else if (type === 2) { // 本月
        const start = formatDate.getMonthStartDate() + ' ' + '00:00:00'
        const end = formatDate.getMonthEndDate() + ' ' + '23:59:59'
        return { start: start, end: end }
      } else if (type === 3) { // 季度
        const start = formatDate.getQuarterStartDate() + ' ' + '00:00:00'
        const end = formatDate.getQuarterEndDate() + ' ' + '23:59:59'
        return { start: start, end: end }
      } else if (type === 4) { // 本年
        const start = formatDate.getYearStartDate() + ' ' + '00:00:00'
        const end = formatDate.getYearEndDate() + ' ' + '23:59:59'
        return { start: start, end: end }
      }
    },
    async init(type) {
      const result1 = await logisticsData({ findType: type })
      if (result1.code === 200) this.logisticsView = result1.data
      const date = this.formatData(type)
      const result2 = await purchaseViewData(date)
      if (result2.code === 200) this.purchaseView = result2.data
    },
    selectChange(val) {
      switch (val) {
        case 'all':
          this.init(-1)
          break
        case 'day':
          this.init(0)
          break
        case 'week':
          this.init(1)
          break
        case 'month':
          this.init(2)
          break
        case 'quarter':
          this.init(3)
          break
        case 'years':
          this.init(4)
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.procurement_box{
  padding: 20px;
}
.procurement_data-item{margin-top: 10px;}
.row-title-lable,.data_unit{
  font-size: 14px;
  color: #333;
}
.card-panel-num{
  font-size: 28px;
  font-weight:600;
}
.row-data{
    color: #1890ff;
    font-size: 20px;
    /* font-weight: bold; */
}
.orange{
  color: #FF7418FF;
}

</style>
